<template>
  <div id="orderDetailPageHeader">
    <div class="headerDiv">

      <div class="headerLeftDiv">
        <OrderPageTitleView
          title="订单编号:"
          :content="orderDetail.orderNo"
        ></OrderPageTitleView>
        <OrderPageTitleView
          title="创建时间:"
          :content="orderDetail.createAt"
        ></OrderPageTitleView>
        <!--<OrderPageTitleView-->
          <!--title="金额"-->
          <!--:content="'¥' + orderDetail.orderPrice"-->
          <!--v-show="orderDetail.orderPrice > 0"-->
        <!--&gt;</OrderPageTitleView>-->
      </div>
      <div class="headerRightDiv">
        <div class="stateTitle">{{ stateStr }}</div>
      </div>
    </div>
    <div class="middleDiv">

      <div class="newTitle">
        订单信息
      </div>



      <OrderPageTitleView
        title="报修区域"
        :content="orderDetail.repairArea"
      ></OrderPageTitleView>

      <OrderPageTitleView
              title="报修地址"
              :content="orderDetail.address"
      ></OrderPageTitleView>

      <OrderPageTitleView
              title="联系方式"
              :content="orderDetail.mobile"
              isMiddleItem="true"
      ></OrderPageTitleView>

      <OrderPageTitleView
              title="内容描述"
              :content="orderDetail.repairInfo"
      ></OrderPageTitleView>

      <div class="imgDiv">
        <div class="title">
          图片
        </div>
        <div>
          <img v-for="(img , i) in imageList" :src="img" class="preimg" @click="clickImg(i)"/>
        </div>
      </div>

    </div>
    <div class="bottomDiv" v-show="orderDetail.orderPrice > 0">

      <div class="newTitle">
        订单明细
      </div>

      <OrderPageTitleView
        title="上门费"
        :content="'¥'+orderDetail.doorFee"
        v-show="orderDetail.doorFee > 0"
      ></OrderPageTitleView>
      <OrderPageTitleView
        title="服务费"
        :content="'¥'+orderDetail.serviceFee"
        v-show="orderDetail.serviceFee > 0"
      ></OrderPageTitleView>
      <OrderPageTitleView
              title="材料费"
              :content="'¥'+orderDetail.bomFee"
              v-show="orderDetail.bomFee > 0"
      ></OrderPageTitleView>

      <div class="totalMoneyDiv" v-show="orderDetail.orderPrice > 0">
        合计：¥{{orderDetail.orderPrice}}
      </div>

    </div>

    <ChangeMoneyPopup
      v-bind:showChangeMP="showChangeMP"
      :closeChangeMP="closeChangeMP"
      :getMoney="getMoney"
    ></ChangeMoneyPopup>
  </div>
</template>

<script>
import OrderPageTitleView from "./OrderPageTitleView";
import ChangeMoneyPopup from "./ChangeMoneyPopup";
import { addImagePrefix, getOrderStatusStr,actionWithLink} from "@/utils/utils";
import { ImagePreview } from 'vant';

export default {
  name: "OrderDetailPageHeader",
  components: {
    OrderPageTitleView,
    ChangeMoneyPopup
  },
  data() {
    return {
      edit: require("@/images/icon/order/edit.png"),
      showChangeMP: false
    };
  },
  computed: {
    imageList() {
      if (this.orderDetail.imgUrls) {
        var list = this.orderDetail.imgUrls.split(",");
        var urlList = [];
        for (var i = 0; i < list.length; i++) {
          var str = list[i];
          urlList.push(addImagePrefix(str));
        }

        return urlList;
      }

      return [];

    },
    stateStr() {
      return getOrderStatusStr(this.isMaster, this.orderDetail.status);
    }
  },
  props: {
    orderDetail: Object
  },
  methods: {
    changeMoney() {
      this.showChangeMP = true;
    },
    closeChangeMP() {
      this.showChangeMP = false;
    },
    getMoney(value) {
      this.showChangeMP = false;

      console.log(value);
    },
      clickImg(i){
          ImagePreview({
              images: this.imageList,
              startPosition: i,
              closeOnPopstate:true,
              onClose() {
              }
          });
      }
  }
};
</script>

<style scoped>
#orderDetailPageHeader {
  background-color: #f6f8fb;
  margin-bottom: 1rem;
}
.headerDiv {
  background-color: #397be6;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.3333333333333333rem;
}

.headerLeftDiv {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: start;
  align-items: flex-end;
}

.headerRightDiv {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
}

.middleDiv {
  background-color: white;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.3333333333333333rem;
  padding-top: 1.1rem;
}
.bottomDiv {
  margin-top: 1rem;
  background-color: white;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.3333333333333333rem;
}
.stateTitle {
  height: 1.9666666666666666rem;
  font-size: 1.1rem;
  font-family: PingFangSC-Semibold, PingFangSC;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 1.9666666666666666rem;
}
.editimg {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
}
.editDiv {
  display: flex;
  flex-flow: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.editWord {
  height: 1.3333333333333333rem;
  font-size: 0.9333333333333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 1.3333333333333333rem;
}
.title {
  width: 5.333333333333333rem;
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.4rem;
}

#orderPageTitleView {
  width: 100%;
  display: flex;
  flex-flow: row;
}

.imgDiv{
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 0.7rem;

}
.preimg {
  height: 5rem;
  width: 5rem;
  margin-right: 0.6rem;
}
  .newTitle{
    height:1.4rem;
    font-size:1rem;
    font-family:PingFangSC-Medium,PingFangSC;
    font-weight:500;
    color:rgba(18,28,50,1);
    line-height:1.4rem;
    margin-bottom: 0.4rem;
  }
  .totalMoneyDiv{
    width: 100%;
    text-align: right;
    height:1.3333333333333333rem;
    font-size:1.05rem;
    font-family:PingFangSC-Medium,PingFangSC;
    font-weight:500;
    color:rgba(242,62,84,1);
    line-height:1.3333333333333333rem;
  }
</style>
